<template>
  <basic-container>
    <div class="header">
      <TitleComponent mainTitle="内部用户" subTitle="列表"/>
      <el-button text type="primary" @click="router.push('/index')">主页</el-button>
    </div>
    <div class="crud_content">
      <avue-crud :option="option"
                 :table-loading="crudData.loading"
                 :data="crudData.data"
                 :page.sync="crudData.page"
                 v-model="crudData.form"
                 @selection-change="selectionChange"
                 @refresh-change="refreshChange"
                 ref="crud"
                 @on-load="onLoad">
        <template #menu-left>
          <el-button type="primary" @click="addTo" icon="el-icon-plus">新增</el-button>
          <el-button type="danger" v-if="crudData.deleteFlag" icon="el-icon-delete" @click="rowDelete">批量删除
          </el-button>
        </template>
        <template #menu="{ row }">
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <el-icon style="rotate: 90deg;cursor: pointer" size="20">
              <More/>
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="edit">编辑</el-dropdown-item>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </avue-crud>
    </div>
    <el-dialog
        v-model="crudData.addView"
        :title="crudData.tit"
        width="70%"
        append-to-body
        destroy-on-close
    >
      <div style="padding: 2%">
        <avue-form
            :option="optionForm"
            :data="crudData.formData"
            ref="formRef"
        />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" icon="el-icon-circle-check" @click="saveSubmit(crudData.tit)">{{
              crudData.tit === '新增' ? '保存' : '修改'
            }}
          </el-button>
          <el-button icon="el-icon-circle-close" @click="crudData.addView=false">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="confirmDeleteVisible" @close="handleDeleteCancel" title="" width="440" destroy-on-close
               center class="custom-dialog">
      <div class="swal2-header">
        <div class="swal2-icon swal2-question swal2-animate-question-icon"></div>
        <div class="swal2_fs">确认删除？</div>
      </div>
      <div class="swal2_he">ID - {{ crudData.indexId }}</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" class="btn btn-primary" @click="handleDeleteConfirm">
            确认
          </el-button>
          <el-button class="btn" type="" @click="handleDeleteCancel">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import {reactive, ref} from 'vue';
// import {getList} from "@/api/user/overview.js";
import TitleComponent from '@/components/title/index.vue';
import {useRouter} from 'vue-router';
import BasicContainer from "@/components/basic-container/main.vue";
import {ElMessage} from "element-plus";

let crud: any = ref('')
let formRef: any = ref('')
let option: any = reactive({
  height: 'auto',
  calcHeight: 100,
  searchShow: true,
  searchMenuSpan: 12,
  searchMenuPosition: 'right',
  tip: false,
  border: true,
  index: false,
  viewBtn: false,
  editBtn: false,
  delBtn: false,
  addBtn: false,
  dialogWidth: '40%',
  menuFixed: 'right',
  labelWidth: 130,
  gridBtn: false,
  selection: true,
  indexLabel: '序号',
  saveBtnText: '确定',
  refreshBtn: true, // 刷新按钮
  columnBtn: false,
  searchShowBtn: false,
  indexWidth: 60,
  column: [
    {
      label: "编号",
      prop: "index",
      search: true,
      sortable: true,
      span: 24,
    },
    {
      label: "所属代理",
      prop: "proxy",
      span: 24,
    },
    {
      label: "VIP等级",
      prop: "level",
      span: 24,
    },
    {
      label: "账户",
      prop: "account",
      search: true,
      span: 24,
    },
    {
      label: "上级",
      prop: "test2",
      span: 24,
    },
    {
      label: "更新时间",
      prop: "test3",
      sortable: true,
      span: 24,
    },
    {
      label: "注册时间",
      prop: "test4",
      sortable: true,
      span: 24,
    },
  ]
})
let crudData: any = reactive({
  loadingSubmit: false,
  loadingSave: false,
  index_unit: [],
  selectList: [],
  deleteFlag: false,
  indexId: '',
  loading: true,
  tit: '',
  addView: false,
  active: 1,
  page: {
    pageSize: 10,
    currentPage: 1,
  },
  filedArr: [],
  data: []
})
let optionForm: any = reactive({
  submitBtn: false,
  emptyBtn: false,
  labelWidth: 100,
  column: [
    {
      label: '代理编号',
      prop: 'dlbh'
    },
    {
      label: '上级编号',
      prop: 'sjbh'
    },
    {
      label: '用户昵称',
      prop: 'yhlc',
      rules: [
        {
          required: true,
          message: '请输入用户昵称',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '等级',
      prop: 'levels',
      type: 'select',
      dicData: [
        {
          label: 'VIP1',
          value: '1'
        },
        {
          label: 'VIP2',
          value: '2'
        },
        {
          label: 'VIP3',
          value: '3'
        },
        {
          label: 'VIP4',
          value: '4'
        },
        {
          label: 'VIP5',
          value: '5'
        },
      ]
    },
    {
      label: '用户手机号',
      prop: 'phone',
      span: 24,
      rules: [
        {
          required: true,
          message: '请输入用户手机号',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '密码',
      prop: 'password',
      type: 'password'
    },
    {
      label: '安全密码',
      prop: 'passwords',
      type: 'password'
    },
    {
      label: '头像',
      prop: 'imgUrl3',
      type: 'upload',
      dragFile: true,
      listType: 'picture-card',
      accept: 'image/png, image/jpeg',
      limit: 1,
      span: 24,
      propsHttp: {
        res: 'data'
      },
      tip: '只能上传jpg/png用户头像',
      action: 'https://api.avuejs.com/imgupload'
    },
    {
      label: '禁止提现',
      prop: 'jztx',
      type: 'switch',
      dicData: [
        {
          label: '',
          value: 0
        }, {
          label: '',
          value: 1
        }
      ]
    },
    {
      label: '禁用用户',
      prop: 'jyyh',
      type: 'switch',
      dicData: [
        {
          label: '',
          value: 0
        }, {
          label: '',
          value: 1
        }
      ]
    },
    {
      label: '创建时间',
      prop: "datetime",
      disabled: true,
      type: "datetime",
      value: new Date()
    },
  ]
})

const confirmDeleteVisible = ref(false);
const currentRow = ref({});

function handleCommand(command, row) {
  console.log('command>>', row)
  if (command === 'edit') {
    crudData.tit = '编辑'
    crudData.addView = true
    crudData.form = row
  } else if (command === 'delete') {
    crudData.indexId = row.index
    confirmDeleteVisible.value = true
  }
}

function rowDelete() {
  crudData.indexId = crudData.selectList.map(item => item.index).join(',')
  confirmDeleteVisible.value = true
}

function addTo() {
  crudData.tit = '新增'
  crudData.addView = true
}

function saveSubmit(val: any) {
  formRef.value.validate((valid, done) => {
    if (valid) {
      if (val === '新增') {
        ElMessage.success('保存成功')
      } else {
        ElMessage.success('修改成功')
      }
      done()
    } else {
      done()
    }
  })
}

function refreshChange() {
  onLoad();
}

function selectionChange(list) {
  crudData.selectList = list
  crudData.deleteFlag = crudData.selectList.length > 0;
}

const handleDeleteCancel = () => {
  confirmDeleteVisible.value = false;
};

const handleDeleteConfirm = () => {
  confirmDeleteVisible.value = false;
  // 执行删除操作
  ElMessage.success('删除成功');
  // 调用API添加实际的删除逻辑
};


// 跳转路由
const router = useRouter();

const handleAdd = () => {
  router.push('/user/internalUsers/add');
}


const onLoad = () => {
  crudData.loading = false;
  crudData.data = [
    {
      index: '662303',
      proxy: '',
      level: 'VIP2',
      account: '88888888',
      test2: '322303',
      test3: '2024-06-18 05:48:04',
      test4: '2023-06-18 05:48:04',
    }
  ]
  crudData.page.total = crudData.data.length;

  // getList().then((res: any) => {
  //     console.log('getReviewLog--', res);
  //     const Data = res.data.data;
  //     // crudData.page.total = Data.total;
  //     crudData.logData = Data;
  //     crudData.loading = false;
  // });
}
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2%;
}

.crud_content {
  width: 100%;
}

.add-button {
  margin-left: 20px;
}

.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  zoom: normal;
  border: 0.25em solid transparent;
  border-radius: 50%;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swal2-icon.swal2-question::before {
  content: "?";
}

.swal2-icon::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92%;
  font-size: 3.75em;
}

.swal2-icon.swal2-question {
  border-color: #c9dae1;
  color: #87adbd;
}

.swal2_fs {
  margin: 0 0 0.4em;
  padding: 0;
  font-size: 25px;
  color: #595959;
  text-align: center;
  font-weight: 400 !important;
}

.swal2_he {
  text-align: center;
  color: #545454;
  font-size: 1.125em;
  font-weight: 300;
  line-height: normal;
  word-wrap: break-word;
}

.btn {
  padding: 0.54rem 1.2rem !important;
  height: 34px;
  line-height: 1.2;
  border-radius: 0.2rem;
  cursor: pointer;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.065),
  0 2px 2px 0 rgba(0, 0, 0, 0.065), 0 1px 5px 1px rgba(0, 0, 0, 0.065);
}

.btn-primary {
  color: #fff;
  background-color: #4e9876;
  border-color: #4e9876;
}

.avue-form__group ::v-deep .el-form-item {
  width: 800px !important;
}
</style>
